<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./../lib/vconsole.min.js"></script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=4woYXvjYCbrpX0jVGBO2Dy5SxLptnrBa&s=1"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.10&key=a250c70fdd65a748d68b74dddcc362ec"></script>

    <script>
        if (window.location.hash == '#debug') {
            var vConsole = new VConsole();
        }
    </script>
    <title>Hello City</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- <div id="container" style="height: 100%;width:100%;display: none"></div>
    <div id="container2" style="height: 100%;width:100%;"></div> -->

    <script type="text/javascript">
        //浏览器定位设置
        var positionOption = {
            enableHighAccuracy: true,
            maximumAge: 30000,
            timeout: 60000
        }

        var locationData = {};

        //在使用到GPS传感器时取消下面的注释
        // navigator.geolocation.getCurrentPosition(positionHandler, errorHandler, positionOption);
        positionHandler();

        window.addEventListener("deviceorientation", orientationHandler, true);

        //调百度地图
        function bMap(place, rad) {
            var mapContainer = document.createElement("div");
            mapContainer.style.cssText = 'height: 100%;width:100%;';

            var map = new BMap.Map(mapContainer); // 创建Map实例
            map.centerAndZoom(new BMap.Point(locationData.curPos.lng, locationData.curPos.lat), 15);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

            // map.setCurrentCity("哈尔滨");// 设置地图显示的城市 此项是必须设置的//貌似也可以不设置？

            //当前搜索中心点
            var mPoint = new BMap.Point(locationData.curPos.lng, locationData.curPos.lat);
            //创建圆
            var circle = new BMap.Circle(mPoint, 2000, { fillColor: "red", fillOpacity: 0.1, strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.3 });
            //增加圆
            map.addOverlay(circle);
            //添加标注点
            var marker = new BMap.Marker(mPoint, { size: 90 });  // 创建标注
            marker.addEventListener('click', function (e) { console.log(e) })
            map.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE)
            //这里添加了将搜索结果打印到控制台的函数
            var local = new BMap.LocalSearch(map, {
                renderOptions: {
                    map: map,
                    autoViewport: false
                },
                pageCapacity: 100,
                onSearchComplete: function (e) {
                    console.log(JSON.stringify(e.Ar));
                }
            });
            var result = local.searchNearby(place, mPoint, rad);//要查找的地点名称、中心点、半径

            console.log(local)

            // document.body.append(mapContainer);
        }
        //调高德地图//貌似有问题。。。
        function aMap(place, rad) {
            var map = new AMap.Map(mapContainer, {
                resizeEnable: true,
                zoom: 6,
                center: [locationData.curPos.lng, locationData.curPos.lat]
            });
            AMap.service(["AMap.PlaceSearch"], function () {
                console.log(place);
                var placeSearch = new AMap.PlaceSearch({
                    type: place, // 兴趣点类别
                    pageSize: 20, // 单页显示结果条数
                    pageIndex: 1, // 页码
                    citylimit: true,  //是否强制限制在设置的城市内搜索
                    map: map, // 展现结果的地图实例
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });
                console.log("经度：" + locationData.curPos.lng + "，纬度：" + locationData.curPos.lat)
                var cPoint = [locationData.curPos.lng, locationData.curPos.lat];
                console.log(cPoint);
                placeSearch.searchNearBy('', cPoint, rad, function (status, result) {
                    console.log(JSON.stringify(status));
                    console.log(JSON.stringify(result));
                });
            });
            var circleMarker = new AMap.CircleMarker({
                center: [locationData.curPos.lng, locationData.curPos.lat],  // 圆心位置
                radius: 10, // 圆半径
                fillColor: 'red',   // 圆形填充颜色
                strokeColor: '#fff', // 描边颜色
                strokeWeight: 2, // 描边宽度
            });
            map.add(circleMarker);
            // document.body.append(mapContainer);
        };

        function positionHandler(pos) {
            locationData.curPos = {
                // lng: pos.coords.lng,
                // lat: pos.coords.lat,
                lng: 116.313408,
                lat: 39.925278,
                errCode: -1
            };
            console.log(locationData);
            // aMap('美食', 2000);
            bMap("中央电视塔", 2000);
        }
        function errorHandler(e) {
            console.log(e);
            locationData.curPos = {
                errCode: 0
            };
            console.log('没获取到位置。')
        }

        //orientationHandler的参数中包含有手机传感器数据
        function orientationHandler(orientData) {
            var absolute = orientData.absolute;
            var alpha = orientData.alpha;
            var beta = orientData.beta;
            var gamma = orientData.gamma;
            console.log(orientData);
        }

    </script>
</body>

</html>